<template>
  <div class="fill-order-warpper">
    <div v-if="!adressDetail" class="empty">
      <router-link :to="{path:'/addressManage',query:{userId:$route.query.userId}}">
        + 添加收货地址
      </router-link>
      
    </div>
    <div v-else class="address-box">
      <!-- <img src="../assets/images/11.png" alt="" class="left"> -->
       <router-link :to="{path:'/addressManage',query:{userId:$route.query.userId}}">
        <div class="middle">
          <div class="section-line">收货人：{{adressDetail.personName}}
            <span class="phone">{{adressDetail.phone}}</span>
          </div>
          <div class="address-line">收货地址：<span>{{adressDetail.areaCode}}{{adressDetail.address}}</span></div>
        </div>
        <div class="right">
          <img src="../assets/images/17.png" alt="" srcset="">
        </div>
       </router-link>
    </div>
    <group v-for="(getLocalorderItem,index) in getLocalorder" :key="index" class="detai" v-show="getLocalorderItem.diantotal>0">
      <div class="boxs-w" >
        <div class="dian-header">
           <img :src="require('../assets/images/dian.png')" alt="">{{getLocalorderItem.name}}
        </div>
        <div class="box" v-for="(cartItem,shopIndex) in getLocalorderItem.shops" 
            v-show="cartItem.select==true"
             :key="shopIndex">
           <cell-box class="product-box">
              <img :src="cartItem.pic" alt="" class="left">
              <div class="middle flex">
               <div>
                <div class="name-box">{{cartItem.name}}</div>
                <div class="section-line">{{cartItem.lables}}</div>
                <div class="price-box">￥{{cartItem.price}}</div>
               </div>
             <span>x{{cartItem.count}}</span>
          </div>
          <div class="right"></div> 
        </cell-box>
      </div>
      <cell title="商品合计"  :value="getLocalorderItem.diantotal"></cell>
        <!-- <cell title="运费" :value="cartItem.postage"></cell> -->
        <popup v-model="show1">
        <!-- group already has a top border, so we need to hide header's bottom border-->
        <popup-header
        left-text="取消"
        right-text="确认"
        title="请选择你的优惠卷"
        :show-bottom-border="false"
        @on-click-left="show1 = false"
        @on-click-right="gokey(index)"></popup-header>
         <group gutter="0">
          <radio :options="getMyKeyon" @on-change="change"></radio>
        </group>
      </popup>
       <cell title="优惠券" :value="keyontext" is-link @click.native="getcouponUser(getLocalorderItem.diantotal,getLocalorderItem.dianId,index)"></cell>
    
      </div>
     </group>

    <div class="fill-bom flex">
        <div>合计：￥{{totalPrice}}</div>
        <a href="javascript:;" @click="submit">提交订单</a>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import axios from '@/api/request'
  import {
    Tab,
    Group,
    Cell,
    CellBox,
    PopupHeader, 
     Popup,
     Radio

  } from "vux";

  export default {
    components: {
      CellBox,
      Cell,
      Group,
      PopupHeader, 
     Popup,
     Radio
    },
    data () {
      return {
         keyontext:0,
        keyonnum:0,   //优惠卷信息
        keyid:"",
        show1:false,
        getMyKeyon:[],
        myKeyonList:[],
        shopSize:{},
        adressDetail:{},
        shopText:{},
        getMyKeyon:{},
        num:1,
        yjh:[],
        totalPrice:'',
        getMyKeyon:[],
        shopall:[],
      }
    },
  created(){
      this.getedress()
      this.totalPrice=JSON.parse(localStorage.getItem('total'));  //Uptotal
    },
 computed: {
    ...mapGetters(['getLocalorder','getTatal'])
   
  },
     methods:{
       change(value, label){
         var self=this
         self.keyontext=label
         self.keyonnum=self.myKeyonList[value].numberValue
         self.keyid=self.myKeyonList[value].id
       },
       gokey(index){
         var self=this
         self.show1= false
         self.yjh[index].num=self.keyonnum
         self.yjh[index].id=self.keyid
         for(let i=0;i<self.yjh.length;i++){
            self.totalPrice=self.getTatal-self.yjh[i].num
         }
         
       },
       getcouponUser(price,id,index){   //获取可用的优惠卷
           var self=this
           var data={
             price : price, 
             userId : this.$route.query.userId, 
             shopId : id
           }
          
          axios('/device/couponUser/getMyKeyon','post',data).then(res=>{
               if(res.data.code==1000){
                      console.log(res)
                       self.getMyKeyon=[]
                       for(let i=0;i<res.data.data.length;i++){
                           var inf={
                             value:res.data.data[i].name,
                             key:i
                           }
                        self.getMyKeyon=self.getMyKeyon.concat(inf)
                       }
                       self.myKeyonList=res.data.data
                    if(this.getMyKeyon.length>0){
                        this.show1=true
                    }else{
                        this.$vux.toast.text('无可用优惠卷')
                        self.keyontext='无可用优惠卷'
                    }
                 }
             })
       },
       getedress(){   //获取地址
             var self=this    ///device/userAddress/findUserAddress/{userId}
             axios('/device/userAddress/findUserAddress/'+this.$route.query.userId,'post',{}).then(res=>{
              if(res.data.code==1000){
                   self.adressDetail=res.data.data
                }else{
                     self.adressDetail=""
                }
             })
              for(let i=0;i<self.getLocalorder.length;i++){
            let data={
              id:'',
                num:''
            }
            self.yjh=self.yjh.concat(data)
          }
       },
       jsApiCall()
            {
              let _this=this
              WeixinJSBridge.invoke(
                    'getBrandWCPayRequest',
                    this.jsApiParameters,
                    function(res){
                        WeixinJSBridge.log(res.err_msg);
                       
                        if(res.err_msg == "get_brand_wcpay_request:ok"){
                             _this.$router.push({path:'/paySuccess'})
                        //window.location.href="http://www.chenyekeji.com/21market//#/paySuccess?userId"+_this.$route.query.userId;
                    }else{
                        //返回跳转到订单详情页面
                        alert(支付失败);
                            
                    }
                    }
                );
            },
            callpay()
            {
                if (typeof WeixinJSBridge == "undefined"){
                    if( document.addEventListener ){
                        document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
                    }else if (document.attachEvent){
                        document.attachEvent('WeixinJSBridgeReady', this.jsApiCall); 
                        document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
                    }
                }else{
                   this.jsApiCall();
                }
            },
       submit(){   //提交订单 
             var self=this  
             axios('device/payShopCar/','post',self.jointData()).then(res=>{
                 this.jsApiParameters=res.data.finalpackage
                 console.log(res)
                 self.callpay()
             })
       },
       jointData(){   //获取拼接数据
          var self=this  
          const data=new Object();
          data.addressId=self.adressDetail.id
          data.list=new Array()
          
          for(let i=0;i<self.getLocalorder.length;i++){
           
            if(self.getLocalorder[i].diantotal>0){
            data.list[i] = new Object(); 
            
             data.list[i].subs=new Array()
            for(let l=0;l<self.getLocalorder[i].shops.length;l++){
                  
                  if(self.getLocalorder[i].shops[l].select==true){  //判断是否为选中状态的购物车
                     const subslist=new Object()
                     data.list[i].shopId=self.getLocalorder[i].dianId   //店铺id
                     data.list[i].userId=self.$route.query.userId        //用户Id
                     data.list[i].couponId=self.yjh[i].id             //优惠卷id
                     subslist.count=self.getLocalorder[i].shops[l].count
                     subslist.subId=self.getLocalorder[i].shops[l].subProductId   //红色规格id
                     subslist.productId=self.getLocalorder[i].shops[l].id
                     subslist.shopCarId=self.getLocalorder[i].shops[l].shopCarId
                      data.list[i].subs=data.list[i].subs.concat(subslist)
                  }

                  // if(Object.keys(subslist).length){
             
                  //    data.list[i].subs=data.list[i].subs.concat(subslist)
                  // }
                 
             }
             
           
         } 
         }
         for(let bb=0;bb<data.list.length;bb++){
           if(!data.list[bb]){
             data.list.splice(bb,1);
           }
            
         }
         console.log(data)
         return data
       }
     }
  };
</script>

<style>
    .vux-label{
        font-size: 14px;
        color: #444;
    }
</style>
<style lang="less" scoped>
 .dian {
			padding-left: .32rem /* 24/75 */;
      &-header{
				height: 1.066667rem /* 80/75 */;
				display: flex;
				align-items: center;
        border-bottom: .013333rem /* 1/75 */solid #dcdcdc;
        img{
          width: .426667rem /* 32/75 */;
          vertical-align: middle;
					margin-left: .32rem /* 24/75 */;
					margin-right: .213333rem /* 16/75 */;
        }
      }
 }
  .fill-order-warpper{
    min-height: 100%;
    background: #f2f3f6;
    padding-bottom: 100px;
  }
  .product-box {
    display: flex;
    height: 180rem/75;
    border-bottom: 1px solid #f5f5f5;
    .left {
      flex-grow: 0;
      width: 148rem/75;
      height: 148rem/75;
      border-radius: 5px;
      position: absolute;
    }
    .middle {
      flex-grow: 1;
      margin-left: 96rem/37.5;
      justify-content: space-between;
      .name-box {
        color: #333;
        font-size: 14rem/37.5;
        line-height: 23px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
      }
      .section-line {
        margin-top: 0;
        font-size: 12rem/37.5;
        color: #a4a4a4;
        margin-top: 8rem/75;
      }
      .price-box {
        color: #333;
        font-size: 12rem/37.5;
        margin-top: 8rem/75;
        span{
            color:#999;
            text-decoration: line-through;
            margin-left: 10rem/75;
        }
      }
    }
    .right {
      flex-grow: 0;
    }
  }
  .empty{
    height: 96rem/75;
    line-height: 96rem/75;
    background: #fff;
    text-align: center;
    color: #333;
    font-size: 14rem/37.5;
  }
  .address-box {
    position: relative;
    height: 210rem/75;
    position: relative;
    padding:25rem/75 0 0;
    // padding-bottom: 50rem/75;
    background: #fff;
    overflow: hidden;
    a{
      display: block;
    }
    .left {
      position: absolute;
      width: 16rem/37.5;
      height: 18rem/37.5;
      top: 26rem/37.5;
      left: 13rem/37.5;
    }
    .middle {
      // margin-left: 43rem/37.5;
      // margin-right: 33rem/37.5;
      padding-left: 15rem/75;
      padding-right: 20rem/75;
      .section-line {
        font-size: 15rem/37.5;
        color: #333;
      }
      .address-line{
        font-size: 15rem/37.5;
        margin-top: 7rem/37.5;
        padding-right: 20rem/75;
        color: #333;
        line-height: 46rem/75;
        span{
          // font-size: 12rem/37.5;
        }
      }
      .phone{
        font-size: 14rem/37.5;
        margin-top: 0;
        margin-left: 252rem/75;
      }
    }
    .right {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 22rem/37.5;
      display: flex;
      align-items: center;
      img {
        width: 8rem/37.5;
        height: 14rem/37.5;
      }

    }
  }
  .fengeBar{
    height:25rem/75;
    background:#f2f3f6;
    width:100%;
  }
  .fill-bom{
    position:fixed;
    bottom: 0;
    left:0;
    height:95rem/75;
        background: #fff;
    align-items:center;
    box-shadow:-2px 0 10px 2px rgba(0,0,0,.6);
    width:100%;
    justify-content: space-between;
    div{
        width:465rem/75;
        text-align: center;
        font-size:32rem/75;
        color: #ff4444;
    }
    a{
        flex: 1;
        text-align: center;
        background: #ffda44;
        height:100%;
        line-height: 95rem/75;
        font-size:32rem/75;
        color: #444444;
    }
  }
  .detai{
     margin-top:25rem/75;
  }
</style>

<style>
  .fill-order-warpper .weui-cells:before {
    content: none;
  }
  .fill-order-warpper .weui-cell:before{
    left: 0;
  }
  .fill-order-warpper .weui-cells:after {
    border-bottom: 1rem/37.5 solid #dbdbdb;
  }

  .fill-order-warpper .weui-cell:before {
    border-top: 1rem/37.5 solid #dbdbdb;
  }
  .fill-order-warpper .weui-cells{
    margin-top: 0;
  }
  .vux-label{
    font-size: 0.32rem;
  }

</style>